<!doctype html>
<html class="no-js">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Amaze UI Admin index Examples</title>
		<meta name="description" content="这是一个 index 页面">
		<meta name="keywords" content="index">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="icon" type="image/png" href="assets/i/favicon.png">
		<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<link rel="stylesheet" href="assets/css/amazeui.min.css" />
		<link rel="stylesheet" href="assets/css/admin.css">
		<link rel="stylesheet" href="assets/css/admin_custom.css" />
		<link rel="stylesheet" href="assets/css/editor.css" />
	</head>

	<body>
		<style>
			.pd8 {
				padding: 0.7rem;
			}
			
			@media only screen and (min-width: 1330px) {
				.show1 {
					display: none;
				}
			}
			
			@media (min-width: 1330px) {
				.show1 {
					display: none;
				}
			}
			
			.am-nav-pills>li+li {
				margin-left: 0px !important;
			}
			
			.am-topbar,
			.am-topbar a {
				color: #ddd;
			}
			
			.headerbg {
				border-color: #50627f !important;
			}
			
			body {
				font-size: 1.4em;
			}
			
			.admin-sidebar-list li a {
				padding-left: 15px;
			}
			
			.admin-sidebar {
				width: 245px;
			}
			/*.tabspad {
				
				padding: 1.6rem;
				padding-left: 0px !important;
				padding-right: 0px !important;				
			}*/
			
			.am-tabs-nav {
				padding: 0px 20px;
				background: url(assets/images/default/noise.white.png);
			}
			
			.headermenu span {
				display: block;
				padding-bottom: 8px;
			}
			
			.am-tabs-bd {
				border: 1px solid #CCCCCC;
			}
			
			.am-nav-tabs>li.am-active>a,
			.am-nav-tabs>li.am-active>a:focus,
			.am-nav-tabs>li.am-active>a:hover {
				border: none;
				border-bottom: 3px solid salmon;
			}
			.imgshade{
				display: none;
			}
		</style>
		<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

		<!-- content start -->
		<div class="admin-content" style="padding: 10px 10px;">

			<div style="  color: #000;  background-color:#fff ; border-radius: 5px 5px 5px 5px; ">

				<div class="modalcon">

					<div class="modal-header"><a class="close" data-dismiss="modal">×</a>
						<h3 class="title">选择图片</h3></div>
					<div class="modal-body">
						<div class="am-g picmodal">
							
								<section class="am-panel am-panel-default am-fl" style="width: 160px; margin: 10px;">
									<main class="" style="position: relative;" >
										<a href="javascript:;"><img src="http://mith.qiniudn.com/myface.jpg" width="160px" height="160px" /></a>
										<div style="position: absolute;  background-color: rgba(0,0,0,0.6); width: 160px; height: 197px;top: 0;" class="imgshade" ></div>
									</main>
									<footer class="am-panel-footer">面板页脚</footer>
								</section>
								<section class="am-panel am-panel-default am-fl" style="width: 160px; margin: 10px;">
									<main class="" style="position: relative;" >
										<a href="javascript:;"><img src="http://mith.qiniudn.com/myface.jpg" width="160px" height="160px" /></a>
										<div style="position: absolute;  background-color: rgba(0,0,0,0.6); width: 160px; height: 197px;top: 0;" class="imgshade"></div>
									</main>
									<footer class="am-panel-footer">面板页脚</footer>
								</section>
								<section class="am-panel am-panel-default am-fl" style="width: 160px; margin: 10px;">
									<main class="" style="position: relative;" >
										<a href="javascript:;"><img src="http://mith.qiniudn.com/myface.jpg" width="160px" height="160px" /></a>
										<div style="position: absolute;  background-color: rgba(0,0,0,0.6); width: 160px; height: 197px;top: 0;" class="imgshade"></div>
									</main>
									<footer class="am-panel-footer">面板页脚</footer>
								</section>
								<section class="am-panel am-panel-default am-fl" style="width: 160px; margin: 10px;">
									<main class="" style="position: relative;" >
										<a href="javascript:;"><img src="http://mith.qiniudn.com/myface.jpg" width="160px" height="160px" /></a>
										<div style="position: absolute;  background-color: rgba(0,0,0,0.6); width: 160px; height: 197px;top: 0;" class="imgshade"></div>
									</main>
									<footer class="am-panel-footer">面板页脚</footer>
								</section>
								<section class="am-panel am-panel-default am-fl" style="width: 160px; margin: 10px;">
									<main class="" style="position: relative;" >
										<a href="javascript:;"><img src="http://mith.qiniudn.com/myface.jpg" width="160px" height="160px" /></a>
										<div style="position: absolute;  background-color: rgba(0,0,0,0.6); width: 160px; height: 197px;top: 0;" class="imgshade"></div>
									</main>
									<footer class="am-panel-footer">面板页脚</footer>
								</section>
								<section class="am-panel am-panel-default am-fl" style="width: 160px; margin: 10px;">
									<main class="" style="position: relative;" >
										<a href="javascript:;"><img src="http://mith.qiniudn.com/myface.jpg" width="160px" height="160px" /></a>
										<div style="position: absolute;  background-color: rgba(0,0,0,0.6); width: 160px; height: 197px;top: 0;" class="imgshade"></div>
									</main>
									<footer class="am-panel-footer">面板页脚</footer>
								</section>
								<section class="am-panel am-panel-default am-fl" style="width: 160px; margin: 10px;">
									<main class="" style="position: relative;" >
										<a href="javascript:;"><img src="http://mith.qiniudn.com/myface.jpg" width="160px" height="160px" /></a>
										<div style="position: absolute;  background-color: rgba(0,0,0,0.6); width: 160px; height: 197px;top: 0;" class="imgshade"></div>
									</main>
									<footer class="am-panel-footer">面板页脚</footer>
								</section>
								<section class="am-panel am-panel-default am-fl" style="width: 160px; margin: 10px;">
									<main class="" style="position: relative;" >
										<a href="javascript:;"><img src="http://mith.qiniudn.com/myface.jpg" width="160px" height="160px" /></a>
										<div style="position: absolute;  background-color: rgba(0,0,0,0.6); width: 160px; height: 197px;top: 0;" class="imgshade"></div>
									</main>
									<footer class="am-panel-footer">面板页脚</footer>
								</section>
								<section class="am-panel am-panel-default am-fl" style="width: 160px; margin: 10px;">
									<main class="" style="position: relative;" >
										<a href="javascript:;"><img src="http://mith.qiniudn.com/myface.jpg" width="160px" height="160px" /></a>
										<div style="position: absolute;  background-color: rgba(0,0,0,0.6); width: 160px; height: 197px;top: 0;" class="imgshade"></div>
									</main>
									<footer class="am-panel-footer">面板页脚</footer>
								</section>
								<section class="am-panel am-panel-default am-fl" style="width: 160px; margin: 10px;">
									<main class="" style="position: relative;" >
										<a href="javascript:;"><img src="http://mith.qiniudn.com/myface.jpg" width="160px" height="160px" /></a>
										<div style="position: absolute;  background-color: rgba(0,0,0,0.6); width: 160px; height: 197px;top: 0;" class="imgshade"></div>
									</main>
									<footer class="am-panel-footer">面板页脚</footer>
								</section>								
							
						</div>
						<div class="am-g am-text-center ">
							<ul class="pagination">
								<li><a href="http://he2/store-wechat?page=1" rel="prev">«</a></li>
								<li><a href="http://he2/store-wechat?page=1">1</a></li>
								<li class="active"><span>2</span></li>
								<li class="disabled"><span>»</span></li>
							</ul>
						</div>						
					</div>
					<div class="modal-footer">
						<button type="button" class="js-btn-ok btn btn-primary" data-loading-text="保存中..."  disabled id="Pic">保存</button>
						<a type="button" class="btn" data-dismiss="modal" aria-hidden="true" href="http://hao123.com">取消</a>
					</div>

				</div>

			</div>

			<!--<div class="am-margin">
					<button type="button" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
					<button type="button" class="am-btn am-btn-primary am-btn-xs">放弃保存</button>
				</div>-->
		</div>
		<!-- content end -->

		<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

		<!--[if (gte IE 9)|!(IE)]><!-->
		<script src="assets/js/jquery.min.js"></script>
		<!--<![endif]-->
		<script src="assets/js/amazeui.min.js"></script>
		<script src="assets/js/app.js"></script>
		<script language="JavaScript">
			$("section").click(function(){
//				方案1
//					var picshow=$(this).find(".imgshade").css("display")
//					if(picshow=="none"){
//						$("section .imgshade").hide()
//						$(this).find(".imgshade").show();
//						
//					}else{
//						$(this).find(".imgshade").hide();
//					}				
					var picshow=$(this).find(".imgshade").css("display")
					if(picshow=="none"){
						$("section .imgshade").hide()
						$("section").removeAttr("type")
						$(this).find(".imgshade").show();
						$(this).attr("type","choose")
						$("#Pic").removeAttr("disabled")
						
					}else{
						$(this).find(".imgshade").hide();
						$("#Pic").attr("disabled","")
						$("section").removeAttr("type")
					}						
			})
			//'span[url='+deleteurl+']'
			var delbutton="<a class=\"am-btn am-btn-danger am-btn-xs am-radius delpic\">删除</a>";
			//还原
			var picadd="<div class=\"am-u-sm-8 am-u-md-4 am-u-sm-centered am-u-md-centered\"><button type=\"button\" class=\"am-btn am-btn-primary am-btn-block\" onclick=\"EditModal(event,&quot;layer-pic.html&quot;,&quot;新增图片&quot;,&quot;60%&quot;)\">媒体素材库<\/button><\/div>";
			var twadd="<div class=\"am-u-sm-8 am-u-md-4 am-u-sm-centered am-u-md-centered\"><button type=\"button\" class=\"am-btn am-btn-primary am-btn-block\" onclick=\"EditModal(event,&quot;layer-tw.html&quot;,&quot;新增图文&quot;,&quot;60%&quot;)\">媒体素材库<\/button><\/div>";
			var editarea2 ="<textarea class=\"\" style=\"width: 100%;\" rows=\"2\" placeholder=\"\" id=\"urlbox\"></textarea>"			
			var editarea1 = "<div class=\"js-editor-region\"><div class=\"simple-editor\"><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"editor-text\"><div class=\"inputer vbox\"><div class=\"inputer-area vbox\"><textarea maxlength=\"600\" class=\"js-inputer-txta transparent-txta\" cols=\"30\" rows=\"1\" placeholder=\"\" id=\"textbox\"><\/textarea><\/div><div class=\"inputer-actions\"><ul class=\"simple-editor-nav\"><li><div data-popover-name=\"emoticon\" class=\"js-editor-popover inputer-action inputer-action-emoticon\"><a href=\"javascript:;\"><i class=\"ico-simple-editor ico-editor-emoticon\"><\/i> <span>表情<\/span><\/a><div class=\"popover bottom fade in\"><div class=\"arrow\"><\/div><div class=\"js-region-emoticon popover-content\"><\/div><\/div><\/div><\/li><li><div data-popover-name=\"hyperlink\" class=\"js-editor-popover inputer-action inputer-action-hyperlink\"><a href=\"javascript:;\"><i class=\"ico-simple-editor ico-editor-hyperlink\"><\/i> <span><\/span><\/a><div class=\"popover bottom fade in\"><div class=\"arrow\"><\/div><div class=\"js-region-hyperlink popover-content\"><div class=\"hyperlink\"><input class=\"js-txt input-large txt\" type=\"text\" placeholder=\"http://\"> <button type=\"submit\" class=\"js-btn-ok btn btn-primary\">确定<\/button><\/div><\/div><\/div><\/div><\/li><\/ul><div class=\"word-counter\"><span>大约还可输入<i class=\"js-word-counter\">600<\/i>字<\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>";			
			$("#Pic").click(function(){
				
				$(window.parent.document).find("#editcor").find(".piccor").html($('section[type=choose]').clone())
				$(window.parent.document).find(".imgshade").remove()
				$(window.parent.document).find("#editcor").find(".piccor").append(delbutton)
					$(window.parent.document).find("#editcor").find("#tab1").find(".modal-body").html(editarea1)
					$(window.parent.document).find("#editcor").find("#tab2").find(".modal-body").html(editarea2)
					//$(window.parent.document).find("#editcor").find("div[class*=am-active]").find("#tab3").find(".piccor").html(picadd)
					$(window.parent.document).find("#editcor").find("#tab4").find(".twcor").html(twadd)					
				window.parent.layer.closeAll()
			})
		</script>
	</body>

</html>